<template>
  <div class="reservation-detail-container">
    <div class="header">
      <h2>预约详情</h2>
      <el-button @click="goBack">返回</el-button>
    </div>

    <div v-loading="loading" class="detail-content">
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="预约编号">{{ reservation.id }}</el-descriptions-item>
        <el-descriptions-item label="预约状态">
          <el-tag :type="getStatusType(reservation.status)">
            {{ getStatusText(reservation.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预约人">{{ reservation.user_info?.nickname || '未知用户' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ reservation.user_info?.phone || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="预约展览">{{ reservation.exhibition_info?.title || '未知展览' }}</el-descriptions-item>
        <el-descriptions-item label="参观人数">{{ reservation.visitor_count || 0 }}人</el-descriptions-item>
        <el-descriptions-item label="参观日期">{{ reservation.visit_date || '' }}</el-descriptions-item>
        <el-descriptions-item label="参观时段">{{ reservation.visit_time_slot || '' }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ reservation.create_time || '' }}</el-descriptions-item>
      </el-descriptions>

      <!-- <div class="visitor-section">
        <h3>参观者信息</h3>
        <div v-if="!reservation.visitors || reservation.visitors.length === 0" class="no-data">
          <el-empty description="暂无参观者信息"></el-empty>
        </div>
        <el-table v-else :data="reservation.visitors" border style="width: 100%">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="id_card" label="身份证号" />
          <el-table-column prop="phone" label="联系电话" />
        </el-table>
      </div> -->

      <div v-if="reservation.status === 0" class="action-section">
        <el-button type="success" @click="confirmReservation">确认预约</el-button>
        <el-button type="danger" @click="cancelReservation">取消预约</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getReservationDetail, updateReservationStatus } from '@/api/reservation'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const reservation = ref({})
const reservationId = route.params.id

// 获取预约详情
const fetchReservationDetail = async () => {
  loading.value = true
  try {
    const res = await getReservationDetail(reservationId)
    reservation.value = res.data
    console.log('预约详情:', res.data)
  } catch (error) {
    console.error('获取预约详情失败', error)
    ElMessage.error('获取预约详情失败')
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchReservationDetail()
})

// 返回列表页
const goBack = () => {
  router.push('/reservation')
}

// 确认预约
const confirmReservation = () => {
  updateStatus(1, '确认')
}

// 取消预约
const cancelReservation = () => {
  ElMessageBox.confirm('确定要取消该预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    updateStatus(2, '取消')
  }).catch(() => {})
}

// 更新预约状态
const updateStatus = async (status, actionText) => {
  try {
    await updateReservationStatus(reservationId, status)
    ElMessage.success(`${actionText}预约成功`)
    fetchReservationDetail()
  } catch (error) {
    console.error(`${actionText}预约失败`, error)
    ElMessage.error(`${actionText}预约失败`)
  }
}

// 获取状态类型
const getStatusType = (status) => {
  const types = ['warning', 'success', 'info']
  return types[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = ['待审核', '已确认', '已取消']
  return texts[status] || '未知'
}
</script>

<style scoped>
.reservation-detail-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-content {
  max-width: 1000px;
}

.visitor-section {
  margin-top: 30px;
}

.action-section {
  margin-top: 30px;
  display: flex;
  gap: 10px;
}

.no-data {
  padding: 20px 0;
}
</style> 